<template>
  <div>
    <el-dialog
      title="编辑管理员"
      :visible.sync="menberInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="memberForm" :rules="rules" ref="memberForm">
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="memberForm.phone" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="昵称"
          :label-width="formLabelWidth"
          prop="nickname"
        >
          <el-input v-model="memberForm.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="memberForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="memberForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { memberinfo, memberedit } from "../../require/api";
export default {
  data() {
    return {
      memberForm: {
        uid: "", //会员编号，必填项number
        nickname: "", //管理员昵称string
        phone: "", //手机号
        password: "", //密码string
        status: 1, //状态  1正常2禁用number
      },
      formLabelWidth: "120px",
      rules: {
        phone: [
          { required: true, message: "请选择用户手机号", trigger: "blur" },
          // {
          //   min: 11,
          //   max: 11,
          //   message: "长度在 11 到 11 个字符",
          //   trigger: "blur",
          // },
        ],
        nickname: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
          { min: 3, max: 7, message: "长度在 3 到 7 个字符", trigger: "blur" },
        ],
      },
    };
  },
  props: ["menberInfo"],
  components: {},
  methods: {
    reset() {
      this.memberForm = {
        uid: "", //会员编号，必填项number
        nickname: "", //管理员昵称string
        phone: "", //手机号
        password: "", //密码string
        status: 1, //状态  1正常2禁用number
      };
      this.$refs.memberForm.resetFields();
    },

    // 关闭弹窗
    cancel() {
      this.$emit("cancel", false);
      this.reset();
    },

    // 数据回显
    lookup(uid) {
      // console.log(uid);
      // 查询一条数据
      memberinfo({ uid }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.memberForm = res.list;
          this.memberForm.uid = uid;
          // 密码为空 不显示
          this.memberForm.password = "";
        }
        console.log(this.memberForm);
      });
    },

    // 确认
    confirm() {
      this.$refs.memberForm.validate((valid) => {
        console.log(this.memberForm);
        if (valid) {
          //  请求修改
          memberedit(this.memberForm).then((res) => {
            if (res.code == 200) {
              // 成功提示
              this.$message.success(res.msg);
              // 更新页面
              this.$store.dispatch("member/getMemberAction");
              // 关闭弹窗
              this.cancel();
            } else {
              // 失败提示
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  computed: {},
  mounted() {},
};
</script>
<style lang=less scoped >
</style>
